VOS app

Stappen

1. Afspraken
   1. JavaScript bestandsnamen in kleine letters, hyphenated compounds, namelijk spaties tussen woorden vervangen door verbindingsteken (-)
   2. Componentnamen:
      1. functiecomponent: camelcasenotatie
      2. klassecomponent: pascalnotatie
2. GDPR
   1. Hoe maak je een formulier klaar voor GDPR?
3. We maken de vos (vosa voor Android) applicatie. In de map net boven de map waarin we de app willen maken typen we:

   react-native init vos

4. De app runnen op een device:
   1. Android:
      1. ga naar de map waarin de app staat (cd vosa)

      2. react-native run-android

5. VOS navigatie
   1. De VOS app heeft 3 hoofdviews:
      1. IndexProcedure
         In de map vos/components map maken we een bestand met de naam index-procedure.js.
      2. ViewProcedure
      3. LoggingIn
   2. De navigatiestack zetten we op in vos/components/vos.js:
   3. In de index.js roepen we de App component uit vos.js op:

      import app from './components/vos';

6. We installeren React Navigation
   Let erop dat je voor Android het app/src/main/java/com/vosa/MainActivity.java bestand moet aanpassen.
7. Hulp componenten
   1. home.style.js
   2. basic-elements.js
8. UI data exporteren we vanuit de module data/ui/index-procedure.js. Met UI data bedoelen we de gegevens die we nodig hebben om de tegels van UI te maken, namelijk de tekst, het icoontje, de target als erop geklikt wordt, enz.
   1. const homeIndexProcedureData
   2. const fireIndexProcedureData
   3. const psychoSocialRiskIndexProcedureData
   4. const accidentIndexProcedureData
9. We deleten App.js.

10. We gebruiken net als in de Cordova implementatie font-iconen. Hoe je die maakt lees je op Add custom icons to your React Native application.

11. We maken als eerste component IndexProcedure in het bestand components/index-procedure.js.
    1. We testen dit uit door index.js in de root aan te passen:

       /**
       * @format
       * @lint-ignore-every XPLATJSCOPYRIGHT1
       */
       
       import {AppRegistry} from 'react-native';
       import app from './components/index-procedure';
       import {name as appName} from './app.json';
       
       AppRegistry.registerComponent(appName, () => app);

12. Component indexProdedure maken
    1. Eerst zonder props met de data voor de hoofdindex
13. Overzicht van dependencies:

    1. react-native-vector-icons

       1. IOS
          1. npm install react-native-vector-icons
          2. react-native link react-native-vector-icons
       2. Android
          1. npm install react-native-vector-icons
          2. Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

             apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

             To customize the files being copied, add the following instead:

             project.ext.vectoricons = [ 
                iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] 
                // Name of the font files you want to copy 
             ] 
             apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

    2. React Navigation

    3. React Native Async Storage

    4. Geolocatie is niet echt een dependency. Het is standaard in React aanwezig. Je moet voor het voor Android wel activeren. Voor IOS is het standaard geactiveerd.
       1. On Android it’s similarly simple, just not enabled by default. In your AndroidManifest.xml you’ll need to add the following permission request:

          <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

       2. navigator.geolocation is verwijderd uit React Native >= 6.0

          1. Installeer: react-native-geolocation-service
          2. vraag om toestemming van de gebruiker om geolocatie te gebruiken:
             1. in Android: PermissionsAndroid

    5. react-native-communications

Onder ondertitel

Paragraaf